<!-- 案件项的 原告/被告 信息详情页 -->
<template>
	<view class="add-case-item-detail-box">
		<!-- 原告信息 -->
		<view class="add-case-detail-box">
			<view class="title">原告</view>
			<view class="case-item-box">
				<view style="color: #97979F">身份</view>
				<view>{{ caseData.plaintiff_identify_value || '暂无' }}</view>
			</view>
			<view class="case-item-box">
				<view style="color: #97979F">性质</view>
				<view>{{ caseData.plaintiff_nature === 1 ? '个人' : '企业'}}</view>
			</view>
			<view class="case-item-box">
				<view style="color: #97979F">名称</view>
				<view>{{ caseData.plaintiff_name || '暂无' }}</view>
			</view>
			<view class="case-item-box">
				<view style="color: #97979F">电话</view>
				<view>{{ caseData.plaintiff_mobile || '暂无' }}</view>
			</view>
			<view class="case-item-box">
				<view style="color: #97979F">法定代表人</view>
				<view>{{ caseData.plaintiff_legal || '暂无' }}</view>
			</view>
			<view class="case-item-box">
				<view style="color: #97979F">地址</view>
				<view>{{ caseData.plaintiff_addr || '暂无' }}</view>
			</view>
			<!-- 上传的文件显示区域 -->
			<view class="case-item-box file-box" v-if="caseData.plaintiff_photo.length">
				<view class="file-title" style="color: #97979F">图片</view>
				<view class="flie-list images-box">
					<block v-for="(url, index) in caseData.plaintiff_photo" :key='index'>
						<u-image class="image-item" width="215" height="215" :src="url" @click="previewImage(caseData.plaintiff_photo, index)"></u-image>
					</block>
				</view>
			</view>
		</view>
		<!-- 被告信息 -->
		<view class="add-case-detail-box">
			<view class="title" style="color: #97979F">被告</view>
			<view class="case-item-box">
				<view style="color: #97979F">身份</view>
				<view>{{ caseData.defendant_identify_value || '暂无' }}</view>
			</view>
			<view class="case-item-box">
				<view style="color: #97979F">性质</view>
				<view>{{ caseData.defendant_nature === 1 ? '个人' : '企业'}}</view>
			</view>
			<view class="case-item-box">
				<view style="color: #97979F">名称</view>
				<view>{{ caseData.defendant_name|| '暂无' }}</view>
			</view>
			<view class="case-item-box">
				<view style="color: #97979F">电话</view>
				<view>{{ caseData.defendant_mobile || '暂无' }}</view>
			</view>
			<view class="case-item-box">
				<view style="color: #97979F">法定代表人</view>
				<view>{{ caseData.defendant_legal || '暂无' }}</view>
			</view>
			<view class="case-item-box">
				<view style="color: #97979F">地址</view>
				<view>{{ caseData.defendant_addr || '暂无' }}</view>
			</view>
			<!-- 上传的文件显示区域 -->
			<view class="case-item-box file-box" v-if="caseData.defendant_photo.length">
				<view class="file-title" style="color: #97979F">图片</view>
				<view class="flie-list images-box">
					<block v-for="(url, index) in caseData.defendant_photo" :key='index'>
						<u-image class="image-item" width="215" height="215" :src="url" @click="previewImage(caseData.defendant_photo, index)"></u-image>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 模拟的案件原被告信息数据对象
			caseData: {
				case_id: 1,
				// 原告数据对象
				case_plaintiff: {
					case_ID: '第三方', // 身份
					case_nature: '个人', // 性质
					case_user_name: '张三',
					case_user_phone: '18255667788',
					case_user_rep: '张伟', // 法定代表人
					case_user_adress: '重庆市渝北区', // 地址
					file_names: ['证明材料.jpg', '判决书.file']
				},
				case_defendant: {
					case_ID: '被上诉人', // 身份
					case_nature: '企业', // 性质
					case_user_name: '海天国际',
					case_user_phone: '',
					case_user_rep: '王海天', // 法定代表人
					case_user_adress: '重庆市渝北区', // 地址
					file_names: []
				}
			}
		};
	},
	onLoad(options) {
		this.getData(options.id)
	},
	methods: {
		async getData(id) {
			const res = await this.$u.api.getLawCaseDetail({id: id})
			if(!res) return
			this.caseData = res
			console.log(res);
		},
		// 预览图片
		previewImage(list, index) {
			uni.previewImage({
				current: index,
				urls: list
			})
		}
		
	}
};
</script>

<style lang="scss" scoped>
.add-case-item-detail-box {
	width: 750rpx;
	min-height: 100vh;
	background-color: $u-bg-color;
}
.add-case-detail-box {
	.title {
		height: 83rpx;
		line-height: 83rpx;
		background: #f5f5f5;
		padding-left: 26rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
	}
	.case-item-box {
		min-height: 94rpx;
		background-color: white;
		padding: 0 26rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		border-bottom: 1px solid #e7eaf0;
	}
	.add-img-box {
		min-height: 280rpx;
		background-color: white;
		display: flex;
		flex-wrap: wrap;
		padding: 40rpx 24rpx;
		.img-box {
			width: 33.3%;
		}
	}
	.file-box {
		min-height: 188rpx;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
		padding-bottom: 20rpx;
		.file-title {
			height: 94rpx;
			line-height: 94rpx;
		}
		.flie-list {
			height: 94rpx;
		}
		.images-box {
			height: auto;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin: 0;
			.image-item {
				margin-left: 28rpx;
				margin-top: 20rpx;
				&:nth-child(1) {
					margin-left: 0;
				}
				&:nth-child(4) {
					margin-left: 0;
				}
				&:nth-child(7) {
					margin-left: 0;
				}
				&:nth-child(10) {
					margin-left: 0;
				}
			}
		}
	}
}

</style>
